<!--用车申请页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">预约单列表</span>
<!--    <el-button type="primary" style="float:right;margin-top:13px;"
               @click="addReservationDialogVisible=true"
               >预约餐厅
    </el-button>-->
<!--    :disabled="user.role== '0'"-->
    <!-- 管理员不能在此申请预约餐厅   -->
  </div>
  <!-- 申请预约弹窗 -->
  <el-dialog title="创建预约单" v-model="addReservationDialogVisible"
             style="width:1000px;padding:40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="预约人">
            <el-input readonly :value="user.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预约时间">
            <el-time-picker
                v-model="addForm.reservationTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
                }"
                placeholder="选择时间">
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="预留电话">
            <el-input placeholder="请确保电话可以接通" v-model="addForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预留姓名">
            <el-input placeholder="请输入预留姓名" v-model="addForm.reserveName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="分店选择">
            <el-select placeholder="请选择" v-model="addForm.branchId" @change="loadTableOption(addForm.branchId)">
              <el-option v-for="item in branchOptions"
                         :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="餐桌选择">
            <el-select placeholder="请选择" v-model="addForm.tableId">
              <el-option v-for="item in tableOptions"
                         :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="就餐人数">
            <el-input placeholder="请输入就餐人数" v-model="addForm.number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input placeholder="请输入" type="textarea" resize="none" :rows="3"
                      v-model="addForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="addReservation">确定</el-button>
    </template>
  </el-dialog>

  <!-- 用车申请列表 搜索卡片 -->
  <el-card style="margin: 20px;">
    <el-form style="padding-top:10px;">
      <el-row :gutter="30">
        <el-col :span="5">
          <el-form-item label="申请人">
            <el-input placeholder="请输入申请人" v-model="searchForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="分店选择" style="width:250px;">
            <el-select placeholder="请选择所属分店" v-model="searchForm.branchId" @change="loadTableDate">
              <el-option v-for="item in branchOptions"
                         :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="申请单状态">
            <el-select placeholder="请选择" v-model="searchForm.status" @change="loadTableDate">
<!--              <el-option v-for="item in appOptions" :label="item.label" :value="item.value"></el-option>-->
                            <el-option label="已发起" value="10"></el-option>
                            <el-option label="撤销" value="20"></el-option>
                            <el-option label="审核中" value="30"></el-option>
                            <el-option label="驳回" value="40"></el-option>
                            <el-option label="已通过" value="50"></el-option>
                            <el-option label="商家确认到店" value="60"></el-option>
                            <el-option label="用户确认到店" value="70"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button @click="resetSearch">重置</el-button>
            <el-button type="primary" @click="loadTableDate">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <!-- 预约申请表格 -->
  <el-card style="margin:20px">
    <el-table :data="tableData">
      <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="username" label="申请人"></el-table-column>
      <el-table-column align="center" prop="reserveName" label="预留姓名"></el-table-column>
      <el-table-column align="center" prop="phone" label="预留电话"></el-table-column>
      <el-table-column align="center" prop="reservationTime" label="预约时间"></el-table-column>
      <el-table-column align="center" prop="number" label="就餐人数"></el-table-column>
      <el-table-column align="center" prop="branchId" label="预约餐厅" :formatter="formatRoleTable"></el-table-column>
      <el-table-column align="center" prop="tableId" label="预约餐桌" :formatter="formatTableTable"></el-table-column>
      <el-table-column align="center" prop="status" label="申请单状态" :formatter="appStatusFormatter"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <!-- 只有申请单状态为"已发起"的时候才可以撤销,其它状态下撤销按钮需要禁用 -->
          <el-button type="primary" size="small" link
                     :disabled="scope.row.status!=10" @click="cancel(scope.row.id)">撤销</el-button>
          <!-- 只有商户管理员才能删除预约单-->
          <el-button type="primary" size="small" link
                     :disabled="scope.row.status!=20" @click="deleteR(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
//定义变量控制创建预约单弹窗是否出现
const addReservationDialogVisible = ref(false);

//获取当前登录的用户信息
const user = ref(getUser());
// 关闭弹窗
const handleClose = () => {
  if (confirm('您确认要关闭本窗口吗?' )){
    addReservationDialogVisible.value = false;
    addForm.value = {
      userId: user.value.id,
      username: user.value.username,
      reserveName: '',
      branchId: '',
      tableId: '',
      reservationTime: '',
      phone: user.value.phone,
      number: '',// 预约人数
      remark: ''
    };
  }
}
// 设置弹窗数据保存对象
const addForm = ref({
  userId: user.value.id,
  username: user.value.username,
  reserveName: '',
  branchId: '',
  tableId: '',
  reservationTime: '',
  phone: user.value.phone,
  number: '',// 预约人数
  remark: ''
});
// 定义保存搜索条件的对象
const searchForm = ref({
  username: '',
  branchId: '',
  status: ''
})
// 定义保存餐厅数据的数组
const branchOptions = ref([]);
// 通过id显示餐厅的对应显示名称
const formatRoleTable = (row,column,cellValue,index)=>{
  if(!branchOptions.value){
    return cellValue;
  }
  for(let item of branchOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
};
// 当选择对应的分店时加载对应分店的餐桌数据
const loadTableOption = (id) => {
  // 设置公用方法，加载对应分店的餐桌
  getTablesByID(tableOptions, id);
}
// 定义保存餐桌数据的数组
const tableOptions = ref([]);
// 通过id显示餐桌的对应显示名称
const formatTableTable = (row,column,cellValue,index) => {
  if(!tableOptions.value){
    return cellValue;
  }
  for(let item of tableOptions.value){
    if(item.id==cellValue){
      cellValue = item.name;
    }
  }
  return cellValue;
}

onMounted(()=>{
  getBranchs(branchOptions);
  getTables(tableOptions);
  loadTableDate();
})
// 添加预约单
const addReservation = () => {
  // 发送ajax请求
  let data = qs.stringify(addForm.value);
  console.log(addForm.value);
  axios.post(BASE_URL + '/v1/reservation/save', data).then((response) => {
    if (response.data.code == 2000) {
      // 关闭弹窗
      addReservationDialogVisible.value = false;
      ElMessage.success('添加成功');
      // 清空表单
      addForm.value = {
        userId: user.value.id,
        username: user.value.username,
        reserveName: '',
        branchId: '',
        tableId: '',
        reservationTime: '',
        phone: user.value.phone,
        remark: ''
      };
      // 重新加载预约单列表
      loadTableDate();
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

// 重置搜索条件
const resetSearch = () => {
  // 清空表单
  searchForm.value = {
    username: '',
    branchId: '',
    status: ''
  };
  loadTableDate();
}


// 定义保存预约单数据的数组
const tableData = ref([]);
// 定义格式化预约状态
const appStatusFormatter = (row, column, cellValue, index) => {
  if(cellValue == 10){
    cellValue = '已发起';
  }else if(cellValue == 20){
    cellValue = '已撤销';
  }else if(cellValue == 30){
    cellValue = '确认中';
  }else if(cellValue == 40){
    cellValue = '驳回';
  }else if(cellValue == 50){
    cellValue = '已审核';
  }else if(cellValue == 60){
    cellValue = '商家确认到店';
 }else if(cellValue == 70){
    cellValue = '预约完成';
  }
  return cellValue;
}
// 定义加载分页数据的方法
const loadTableDate = () => {
  // 发送ajax请求
  let data = qs.stringify(searchForm.value);
  axios.get(BASE_URL + '/v1/reservation/select?'+data).then((response) => {
    if (response.data.code == 2000) {
      tableData.value = response.data.data;
      //console.log(tableData.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
// 撤销预约单
const cancel = (id) => {
  if (confirm('确定要撤销该预约单吗？')){
    let status = "20";// 撤销状态
    let data = qs.stringify({status: status, id: id});
    // 发送ajax请求
    axios.post(BASE_URL + '/v1/reservation/save', data).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success('撤销成功');
        // 重新加载预约单列表
        loadTableDate();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}
// 删除预约单
const deleteR = (id) => {
  if (confirm('确定要删除该预约单吗？')){
    // 发送ajax请求
    axios.post(BASE_URL+'/v1/reservation/delete/'+id)
        .then((response)=>{
          if(response.data.code == 2000){
            ElMessage.success('删除成功!');
            loadTableDate();//重新加载预约数据
          }else{
            ElMessage.error(response.data.msg);
          }
        })
  }
}

</script>

<style scoped>
</style>